@import "./reset";
@import "./_div1.scss";
/* 多行注释 */ 
// 变量
@import "./color";
@import "./mixin";

body{  
      background-color: $bg-color;
}    
h1{
      color:  $bg-color - 50 ;
}

// 结构化的关系表达模式;

div:nth-of-type(2){
      width: 100px;
      height: 100px;
      background: blueviolet;
      margin-top: 10px;
      margin-left: auto;
      margin-right: auto;
      //   嵌套关系;

      span{
            color: yellowgreen;

            strong{
                 color:  red; 

                  // 在包裹里写自己的伪类;
                  &:hover{
                        color : #fff;
                  }
            }
            
      }
}

// 继承 
div:nth-of-type(3){
      @extend div:nth-of-type(2);

      -webkit-transition: background-color 1s;
      -moz-transition: background-color 1s;
      -ms-transition: background-color 1s;
      -o-transition: background-color 1s;
      transition: background-color 1s;

      &:hover{
            background-color: aqua;
            transform: rotate(90deg) scale(1.8);
      }
}


// 混合 : mixin 

// @mixin prefix {
//       -webkit-transition: background-color 1s;
//       -moz-transition: background-color 1s;
//       -ms-transition: background-color 1s;
//       -o-transition: background-color 1s;
//       transition: background-color 1s;
// }

// mixin 可也以带有参数;

// @mixin prefix($attr : all .5s) {
//       -webkit-transition: $attr;
//       -moz-transition: $attr;
//       -ms-transition: $attr;
//       -o-transition: $attr;
//       transition: $attr;
// }

div:nth-of-type(4){
      @extend div:nth-of-type(2);
      @include prefix(transform .5s);
      &:hover{
            background: aquamarine;
            transform: rotate(360deg);
      }
}

//  扩展内容 : 
